<template>
    <div class="tag-box">
        <el-tag @click="changePage(tag)" :closable="tag.name !== 'home'" v-for="(tag,index) in tags" :key="index" class="tags" :effect="$route.name == tag.name ? 'dark': 'plain'" @close="handleCloseTag(tag,index)" >{{ tag.label }}</el-tag>
    </div>
</template>

<script setup>
// 仓库
import { useAside } from '../store';
const main=useAside()
import { useRoute,useRouter } from 'vue-router';
const route=useRoute()
const router=useRouter()

const handleClose =(tag)=>{
main.closeTag(tag)
}

// 删除标签
const handleCloseTag=(tag,index)=>{
    // 索引
    const length=tags.length-1
    handleClose(tag)
    if(tag.name !== route.name){
        return
    }
    if(index === length){
        router.push({
            name:tags[index-1].name
        })
    }else{
        router.push({
            name:tags[index].name
        })
    }
}



// 点击切换页面
const changePage =(item)=>{
    main.selectMenu(item)
    router.push(
        {
            name:item.name
        }
    )
}



const tags=main.tabList

</script>


<style lang="less">
.tag-box{
    margin-bottom: 10px;
    .tags{
        margin-right: 10px;
        cursor: pointer;
    }
}

</style>